<template>
    <div>
     <h1>欢迎注册博客园成员</h1>
     <table class="table table-bordered">
        <tbody>
        <tr>
            <td>
                用户名：<input type="text" v-model="data.name"/>
            </td>
        </tr>
        <tr>
            <td>
                密码：<input type="password" v-model="data.password"/>
            </td> 
        </tr>
        <tr>
            <td>
                确认密码：<input type="password" v-model="data.passwords"/>
            </td>
        </tr><tr> <td>
            请选择城市：<select>
                   <option v-for="item in citys" :key="item.id">{{ item.name }}</option>
                </select>
            </td>
        </tr>
        <tr>
             <td>
               请选择性别： <input type="radio" value="1" name="sex" v-model="data.sex"/>男
              <input type="radio" value="2" name="sex" v-model="data.sex"/>女
            </td> 
        </tr>
        <tr>
            <td>
               请选择爱好： <input type="checkbox" name="hobby" value="抽烟" v-model="data.hobby"/>抽烟
                <input type="checkbox" name="hobby" value="烫头" v-model="data.hobby"/>烫头
                <input type="checkbox" name="hobby" value="喝酒" v-model="data.hobby"/>喝酒
            </td> 
        </tr>
        <tr>
            <td>
                备注：<textarea v-model="data.content"></textarea>
            </td> 
        </tr>
        <tr>
            <td>
                <input type="button" value="提交" @click="login"/>
            </td> 
        </tr>
    </tbody>
     </table>
    </div>
</template>

<script setup lang="ts">
  import {ref,reactive}from 'vue'
  let citys=ref([
  {id:1,name:'北京'},
  {id:2,name:'天津'},
  {id:3,name:'上海'},
  {id:4,name:'河北'},
  {id:5,name:'山西'},
  {id:6,name:'山东'}
  ])
  let data=reactive({
    name:'',
    password:'',
    passwords:'',
    sex:1,
    hobby:[],
    content:''
  })
  const login=()=>{
    console.log(data);
  }
</script>

<style scoped>

</style>